<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <Menu></Menu>
            </el-header>
            <el-header style="background-color: white;display: flex">
                <el-col :span="2" style="display: flex">

                </el-col>
                <el-col :span="3" class="imgCol">
                    <img
                            :src="route.query.coverUrl"
                            class="<imag></imag>e"/>
                </el-col>
                <el-col :span="3" class="nameDiv">
                    <el-tag size="large"
                            effect="plain"
                            v-for="(item) in dynamicTags">{{item}}
                    </el-tag>
                    <!--                            -->
                    <!--                            {{route.query.tchname}}-->
                </el-col>

                <el-col :span="10">
                    <h3>{{route.query.name}}</h3>
                </el-col>
                <el-col :span="3" class="teacherDiv">
                    <router-link :to="{path:'/personspace',query:{id:course.tid}}" class="router-link">
                        <span>资料上传者：</span>
                        <span>{{route.query.tchname}}</span>
                    </router-link>
                </el-col>
                <el-col :span="2"></el-col>
            </el-header>
            <el-container>
                <el-aside width="300px">
                    <el-menu
                            class="el-menu-vertical-demo "
                            active-text-color="#42b983"
                    >
<!--                        <el-menu-item index="2" class="router-link">-->
<!--                        </el-menu-item>-->
                        <router-link :to="{path:'/studyCourse',query:course}" class="router-link"
                                     style="text-decoration: none;"
                                     v-if="course.textualType==null || course.textualType ==''">
                            <el-menu-item index="2" class="router-link">
                                <el-icon>
                                    <icon-menu/>
                                </el-icon>
                                <span>课程观看</span>
                            </el-menu-item>
                        </router-link>

                        <router-link :to="{path:'/studyText',query:course}" class="router-link"
                                     style="text-decoration: none;"
                                     v-else>
                            <el-menu-item index="2" class="router-link">
                                <el-icon>
                                    <icon-menu/>
                                </el-icon>
                                <span>文本观看</span>
                            </el-menu-item>
                        </router-link>
                        <router-link :to="{path:'/commentArea',query:course}" class="router-link"
                                     style="text-decoration: none;">
                            <el-menu-item index="3" class="router-link">
                                <el-icon>
                                    <icon-menu/>
                                </el-icon>
                                <span>讨论区</span>
                            </el-menu-item>
                        </router-link>

                    </el-menu>
                </el-aside>
                <el-main class="mainDiv">
                    <!-- 显示评论 -->
                    <div class="comment-list-container">
                        <div class="comment-list-box comment-operate-item">
                            <div><firstReplay :course="course" :getCommentList="selectComment"></firstReplay></div>
                            <ul class="comment-list" v-for="comment in commentList">
                                <!-- 评论根目录 -->
                                <root :comment="comment" :course="course" :getCommentList="selectComment"></root>
                                <!-- 评论子目录 -->
                                <li class="replay-box" style="display: block;">
                                    <ul class="comment-list">
                                        <!-- 子组件递归实现 -->
                                        <child :childComments="comment.child" :parentComment="comment" :course="course" :rootParentId="comment.id" :getCommentList="selectComment" v-if="comment.child != null"></child>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
    import {
        Document,
        Menu as IconMenu,
        Location,
        Setting,
    } from '@element-plus/icons-vue'
    import {useRoute} from 'vue-router'
    import {ref,onMounted} from "vue";
    import {selectCourseComments, selectTextComments} from "@/api/comment";

    const route = useRoute();
    const course = route.query;
    // console.log(course);
    const url = route.query.url
    const dynamicTags = ref([])
    dynamicTags.value = route.query.label.split('&')
    const commentList = ref([])


    const selectComment = ()=>{
        if (course.textualType == '' || course.textualType==null){
            selectCourseComments(route.query.id).then((res)=>{
                commentList.value = res.data;
                // console.log(commentList.value)
            })
        }else {
            selectTextComments({id:route.query.id}).then((res)=>{
                commentList.value = res.data;
            })
        }

    }

    onMounted(()=>{
        selectComment();
    })
</script>

<style scoped>

    .mainDiv {
        /*margin-top: 10px;*/
        /*background-color: white;*/
    }

    .imgCol {
        display: flex;
        justify-content: space-around;
    }

    .nameDiv {
        display: flex;
        align-items: center;
    }

    .teacherDiv {
        display: flex;
        align-items: center
    }

    .el-menu-vertical-demo{
        margin-top: 20px;
        margin-left: 20px;
    }
    div > a {
        color: #2c3e50;
        text-decoration: none;
    }


    .router-link:hover {
        color: #42b983;
    }


    .comment-list-container {
        background-color: white;
    }

    .comment-list-container .comment-list-box {
        padding: 10px 20px;
    }

    .comment-list-container .comment-list {
        list-style: none;
        padding: 5px 10px;
        margin: 5px 10px;
    }

    .comment-list-container .comment-list-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .comment-list-container .comment-list-item .comment-name {
        font-weight: bold;
        margin-right: 5px;
    }

    .comment-list-container .comment-list-item .date {
        font-size: 12px;
        color: #ffffff;
    }

    .comment-list-container .comment-list-item .new-comment {
        margin-top: 5px;
    }

    .comment-list-container .replay-box {
        padding-left: 32px;
    }

    .comment-list-container .replay-box .comment-list {
        margin-top: 5px;
    }

    .comment-list-container .replay-box .comment-list-item .comment-name {
        margin-right: 3px;
        font-weight: bold;
    }

    .comment-list-container .replay-box .comment-list-item .date {
        font-size: 12px;
        color: #ffffff;
    }

    .comment-list-container .replay-box .comment-list-item .new-comment {
        margin-top: 5px;
    }
</style>